<template>
  <div class="my-tag">
    <!-- 失去焦点隐藏输入框 -- 事件@blur 焦点事件 -->
    <!-- 回车事件 @keyup.enter 当回车键被按下时触发修改 -- 子传父 -->
    <input v-if="isEdit" :value="value" class="input" type="text" ref="inp" v-focus placeholder="输入标签" @blur="isEdit = false" @keyup.enter="handleEnter" />
    <!-- 双击事件 @dblclick -->
    <div v-else @dblclick="handleClick" class="text">
      <p v-if="tagContent != ''">{{tagContent}}</p>
      <p v-else>{{value}}</p>
    </div>
  </div>
</template>

<script>
/* my - tag标签组件的封装
1.创建组件 - 初始化
2.实现功能
    （1）双击显示，并且自动聚焦
    （2）失去焦点，隐藏输入框
    （3）回显标签信息
    （4）内容修改了，回车 => 修改标签信息 */
export default {
  props: {
    value: String
  },
  data() {
    return {
      isEdit: false,
      tagContent: ''
    }
  },
  methods: {
    handleClick() {
      //双击后，切换到显示状态(Vue是异步dom更新)
      this.isEdit = true;
      //等dom更新完了,再获取焦点
      /*       this.$nextTick(() => {
              //立刻获取焦点
              this.$refs.inp.focus();
            }) */
    },
    handleEnter(e) {
      if (e.target.value.trim === '') return alert('标签内容不能为空')
      //子传父，将回车，输入框的内容提交给父组件更新
      //由于父组件是v-model双向绑定,触发事件，需要触发 input事件
      //e.target.value 获取输入框的值
      this.$emit('input', e.target.value)
      this.isEdit = false;
    }
  },
}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>